import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
    state={
        mouse:false
    }

    /**
     * @description: 鼠标移入移出
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    mouseInOut=(flag)=>{
        return ()=>{
            this.setState({
                mouse:flag
            })
        }
    }

    /**
     * @description: updataDone
     * @param {*}
     * @return {*}
     * @author: Yu
     */  
    updataDone=(id)=>{
        return (event)=>{
            this.props.updataDone(id,event.target.checked)
        }
    }  

    /**
     * @description: removeListItem
     * @param {*}
     * @return {*}
     * @author: Yu
     */  
    removeListItem=(id)=>{
        return ()=>{
            if (window.confirm("确认删除这个任务吗？")) {
                this.props.removeListItem(id)
            }
        }
    }  

    render() {
        const {id,name,done} = this.props
        const {mouse} = this.state

        return (
             <li onMouseLeave={this.mouseInOut(false)} onMouseEnter={this.mouseInOut(true)}>
                 <input type="checkbox" checked={done} onChange={this.updataDone(id)}/>{name}<button onClick={this.removeListItem(id)} style={{display:mouse?'block':'none'}}>删除</button>
             </li>
        )
    }
}
